<div id="content_header">
  <h3>Register a new staff</h3>
</div>
<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="countryForm" role="form" ng-submit="addStaff()">

      <div class="form-group">
        <label for="">
          Staff Name
        </label>
          <span class="error" ng-show="countryForm.countryLabel.$error.required">Required!</span>
        <input type="text" name="countryLabel" class="form-control" id="" placeholder="Input field" ng-model="staffNew.Name" required>
      </div>

      <div class="form-group">
        <label for="">
          Staff Code
        </label>
          <span class="error" ng-show="countryForm.countryLabel.$error.required">Required!</span>
        <input type="text" name="countryLabel" class="form-control" id="" placeholder="Input field" ng-model="staffNew.Code" required>
      </div>

      <div class="form-group" ng-click="openDatepicker($event, 0)"  ng-class="{ 'has-error': errors.DoB}">
        <label class="required" for="">Date of Birth</label>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-8 col-lg-6">
            <div class="input-group">
              <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="timepicker.timeA" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" required />
              <input type="text" class="form-control" ng-disabled="true" ng-value="timepicker.timeA | date: 'dd MMMM yyyy'">
              <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
            </div>
          </div>
        </div>
        <error-widget field="errors.DoB"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</div>